<template>
	<div class="app-container">
		<div class="content">
			<div class="aside">
				<div class="tree-header">
					<span><svg-icon icon-class="type" class-name='type-class'/>&nbsp;&nbsp;药品类别</span>
				</div>
				<el-tree
					:data="tableData"
					:props="defaultProps"
					@node-click="handleXmxz"
					highlight-current:true
					check-on-click-node:true
					show-checkbox:true
					default-expand-all
					node-key="id"
					ref="tree"
					class="tree"
					:expand-on-click-node="false"
					highlight-current
					:render-content="treeRender">
					<span slot-scope="{ data }" :title="data.name">
					    <!-- //根节点 -->
						<span v-if="data.children != null"><i class="el-icon-folder"></i>&nbsp;&nbsp;{{
								data.name
							}}</span>
						<!-- 子级 -->
						<span v-else>{{ data.name }}</span>
					</span>
				</el-tree>
			</div>
			<el-container>
				<el-header height="50px" class="item-header">
					<div class="main-title">添加节点</div>
				</el-header>
				<el-form style="margin-top: 10%;text-align: center;" :inline="true" class="demo-form-inline"
						 :rules="drugTypeRule" ref="drugTypeFrom" :model="queryForm">
					<el-row>
						<el-form-item label="已选中的节点名称:" :span="20" prop="parentName">
							<el-input v-model="queryForm.parentName" style="width:300px;"></el-input>
						</el-form-item>
					</el-row>
					<el-row>
						<el-form-item label="要添加的子节点名称:" prop="name">
							<el-input v-model="queryForm.name" style="width:300px;"></el-input>
						</el-form-item>
					</el-row>
					<el-button type="primary" @click="saveDrugType('drugTypeFrom')">保 存</el-button>
				</el-form>
			</el-container>
		</div>
		<el-dialog
			title="修改药品类别"
			:visible.sync="dialogVisible"
			width="30%">
			<el-form style="margin-top: 10%;text-align: center;" :inline="true" class="demo-form-inline"
					 :rules="updateTypeRule" ref="updateTypeFrom" :model="updateForm">
				<el-row>
					<el-form-item label="节点名称:" :span="20" prop="name">
						<el-input v-model="updateForm.name" style="width:300px;"></el-input>
					</el-form-item>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmUpdate('updateTypeFrom')">确 定</el-button>
      </span>
		</el-dialog>
	</div>
</template>

<script>
import {GetDrugTypeList, InsertDrugTypeList, UpdateDrugType, DelDrugType} from "@/api/drug/drug";

export default {

	data() {
		return {
			dialogVisible: false,
			names: {},
			tableData: [],
			updateForm: {
				name: null,
				parentId: null,
				id: null
			},
			queryForm: {
				parentName: null,
				name: null,
				parentId: null
			},
			defaultProps: {
				children: 'children',
				label: 'name'
			},
			options: [{
				value: '1',
				label: '已选择节点的 子节点'
			}, {
				value: '2',
				label: '已选择节点的 上一个兄弟节点'
			}, {
				value: '3',
				label: '已选择节点的 下一个兄弟节点'
			}],
			value: '',
			drugTypeRule: {
				parentName: [{required: true, message: '请选择节点名称', trigger: 'blur'}],
				name: [{required: true, message: '请输入节点名称', trigger: 'blur'}]
			},
			updateTypeRule: {
				name: [{required: true, message: '请输入节点名称', trigger: 'blur'}],
			}
		};
	},
	mounted() {
		this.getDrugTypeList();
	},
	methods: {
		handleXmxz(obj, node, data) {
			// if(obj.children==null){
			//  obj.id = obj.parentId;
			// }
			let item = JSON.parse(JSON.stringify(obj));
			this.queryForm.parentName = item.name;
			this.queryForm.parentId = item.id;
			this.updateForm.name = item.name;
			this.updateForm.id = item.id;
			this.updateForm.parentId = item.parentId;
		},
		getDrugTypeList() {
			let _this = this
			GetDrugTypeList(this.params).then(res => {
				_this.tableData = res.data;
			});
		},
		saveDrugType(drugTypeFrom) {
			this.$refs[drugTypeFrom].validate((valid) => {
				if (valid) {
					InsertDrugTypeList(this.queryForm).then(res => {
						this.msgSuccess(res.msg);
						this.getDrugTypeList();
						this.queryForm.parentName = null
						this.queryForm.name = null
					})
				}
			})
		},
		treeRender(h, {node, data, store}) {
			return (
				<span class="tree-node">
					<span>
						<svg-icon style="width: 14px;height: 14px;margin-right:5px" icon-class="file-close"
								  v-show={!node.isLeaf && !node.expanded}></svg-icon>
						<svg-icon style="width: 14px;height: 14px;margin-right:5px" icon-class="file-open"
								  v-show={!node.isLeaf && node.expanded}></svg-icon>
						<el-badge>
							<span>{node.label}</span>
						</el-badge>
					</span>
					<span v-show={node.isCurrent} style="margin-left: 20px;">
						<el-button title="修改" type="text" on-click={() => this.updateDrugType('updateTypeFrom')}>
							<i class="el-icon-edit "></i>
						</el-button>
						<el-button v-show={node.isLeaf} title="删除" type="text" on-click={() => this.delDrugType()}>
							<i class="el-icon-delete"></i>
						</el-button>
					</span>
				</span>
			);
		},
		updateDrugType() {
			this.dialogVisible = true;
		},
		confirmUpdate(updateTypeFrom) {
			this.$refs[updateTypeFrom].validate((valid) => {
				if (valid) {
					UpdateDrugType(this.updateForm).then(res => {
						this.msgSuccess(res.msg);
						this.getDrugTypeList();
						this.queryForm.parentName = null
						this.dialogVisible = false
					})
				}
			})
		},
		delDrugType() {
			this.$confirm('确认删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				// console.log(this.updateForm.id)
				DelDrugType({drugTypeId: this.updateForm.id}).then(res => {
					this.msgSuccess(res.msg);
					this.queryForm.parentName = null
					this.getDrugTypeList();
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	margin: -20px;
	height: calc(100% + 40px);
	display: flex;

	.aside {
		flex: 0 280px;
		position: relative;
		box-shadow: 1px 0px 4px rgba(0, 21, 41, 0.08);

		.tree-header {
			position: absolute;
			height: 50px;
			width: 100%;
			font-size: 36upx;
			line-height: 30px;
			font-family: PingFangSC-Regular;
			padding: 10px 22px;
			box-shadow: 0px 2px 4px rgba(0, 21, 41, 0.08);
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
		}

		.tree {
			margin-top: 55px;
			font-size: 28upx;

			> > > .tree-node {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;
				padding-right: 8px;

				.el-button + .el-button {
					margin-left: 3px;
				}

			}
		}

	}

	.service-item {
		flex: 1;
	}
}

.el-icon-folder {
	color: #519eff;
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 20px;
	box-shadow: 0px 2px 4px rgba(0, 21, 41, 0.08);

	.main-title {
		font-family: PingFangSC-Light;
		line-height: 20px;
		font-size: 32upx;
		display: inline-block;
		margin-right: 12px;
		padding-left: 10px;
		border-left: 4px solid #1890FF;
	}
}

</style>

